


<template>
  <div class="model-form">
    <el-page-header @back="goBack" content="增加商品">
    </el-page-header>
    <div class="model-content">
      <el-form ref="ruleForm" :rules="rules" :model="form" label-width="160px">
        <el-row :gutter="10">
 <el-col :span="12">
     <el-form-item label="商品编码" size="mini" prop="barCode">
             <el-input v-model="form.barCode" name="barCode">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="商品介绍" size="mini" prop="note">
             <el-input v-model="form.note" name="note">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="规格" size="mini" prop="model">
             <el-input v-model="form.model" name="model">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="商家名称" size="mini" prop="shop">
             <el-select style="width: 100%;"  v-model="form.shop" filterable clearable
                     placeholder="请选择">
                 <el-option v-for="item in shopOptions" :key="item.id"
                         :label="item.name" :value="item.id">
                 </el-option>
             </el-select>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="商品分类" size="mini" prop="productCatalog">
             <el-select style="width: 100%;"  v-model="form.productCatalog" filterable clearable
                     placeholder="请选择">
                 <el-option v-for="item in productCatalogOptions" :key="item.id"
                         :label="item.name" :value="item.id">
                 </el-option>
             </el-select>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="商品名称" size="mini" prop="name">
             <el-input v-model="form.name" name="name">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="商品简介显示颜色值" size="mini" prop="summaryColor">
             <el-input v-model="form.summaryColor" name="summaryColor">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="是否为销售商品出售" size="mini" prop="sellState">
             <el-input v-model="form.sellState" name="sellState">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="是否开票" size="mini" prop="invoice">
             <el-input v-model="form.invoice" name="invoice">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="商品状态" size="mini" prop="status">
             <el-input v-model="form.status" name="status">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="启用商品规格" size="mini" prop="hasSku">
             <el-input v-model="form.hasSku" name="hasSku">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="号" size="mini" prop="itemNumber">
             <el-input v-model="form.itemNumber" name="itemNumber">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="销售价" size="mini" prop="salePrice">
             <el-input v-model="form.salePrice" name="salePrice">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="市场价" size="mini" prop="marketPrice">
             <el-input v-model="form.marketPrice" name="marketPrice">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="成本价" size="mini" prop="costPrice">
             <el-input v-model="form.costPrice" name="costPrice">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="积分" size="mini" prop="score">
             <el-input v-model="form.score" name="score">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="vip价" size="mini" prop="vipPrice">
             <el-input v-model="form.vipPrice" name="vipPrice">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="库存量" size="mini" prop="inventory">
             <el-input v-model="form.inventory" name="inventory">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="库存预警值" size="mini" prop="warningValue">
             <el-input v-model="form.warningValue" name="warningValue">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="毛重" size="mini" prop="weight">
             <el-input v-model="form.weight" name="weight">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="净重" size="mini" prop="netWeight">
             <el-input v-model="form.netWeight" name="netWeight">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="高" size="mini" prop="height">
             <el-input v-model="form.height" name="height">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="宽" size="mini" prop="width">
             <el-input v-model="form.width" name="width">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="高" size="mini" prop="length">
             <el-input v-model="form.length" name="length">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="体积" size="mini" prop="volume">
             <el-input v-model="form.volume" name="volume">
             </el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="12">
     <el-form-item label="商品简介" size="mini" prop="summary">
             <el-input v-model="form.summary" name="summary">
             </el-input>
     </el-form-item>
      
 </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: right;padding-bottom: 20px;padding-top: 20px;">
            <el-button @click="goBack">取消</el-button>
            <el-button type="primary" @click="add">确定</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  import common from "@/mixins/common.js";
  var config = {};
  config.methods = {};
  config.mixins = [common];


	config.data = function () {
			return {
				form: {
					barCode: '',
					note: '',
					model: '',
					shop: '',
					productCatalog: '',
					name: '',
					summaryColor: '',
					sellState: '',
					invoice: '',
					status: '',
					hasSku: '',
					itemNumber: '',
					salePrice: '',
					marketPrice: '',
					costPrice: '',
					score: '',
					vipPrice: '',
					inventory: '',
					warningValue: '',
					weight: '',
					netWeight: '',
					height: '',
					width: '',
					length: '',
					volume: '',
					summary: ''				},
            shopOptions: [],
            productCatalogOptions: [],
				rules: {
                        shop: [
							          { required: true, message: '请输入商家名称', trigger: 'blur' }
						      ],
                        name: [
							          { required: true, message: '请输入商品名称', trigger: 'blur' }
						      ],
				}
			}
	};




  config.methods.add = function () {
			var self = this;
			this.$refs["ruleForm"].validate(function(valid){
				if (valid) {
					self.addData();
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		}

	config.methods.addData = function () {
			var self = this, data = this.form;
			if (this.deforeAddData) {
				this.deforeAddData();
			}
			this.postData("/tenantRest/product/create.htm", data, function (res) {
				if (res.code == 0) {
					self.$message({
						message: '添加数据成功',
						type: 'success'
					});
					self.$router.go(-1);
				} else {
					self.$message.error(res.msg);
				}
			});
		}


		config.methods.loadShopOptions= function(){
				var self=this;
				var param = {};
				param.sortMethod = "asc";
				param.sortField = "id";
				param.level =1;
				param.size =500;
				param.fetch=0;
				this.postData("/tenantRest/shop/list.htm", param, function (result) {
					if (result.code == 0) {
              self.shopOptions= result.list;
					}
				});
		}

		config.methods.loadProductCatalogOptions= function(){
				var self=this;
				var param = {};
				param.sortMethod = "asc";
				param.sortField = "id";
				param.level =1;
				param.size =500;
				param.fetch=0;
				this.postData("/tenantRest/productcatalog/list.htm", param, function (result) {
					if (result.code == 0) {
              self.productCatalogOptions= result.list;
					}
				});
		}

  
  	config.mounted = function () {
         this.loadShopOptions();
         this.loadProductCatalogOptions();
		}


  export default config;
</script>

<style scoped>
</style>